<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            box-sizing: border-box;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            width: 100%;
            height: 50px;
            background-color: rgb(11, 174, 238);
        }

        header .h_you {
            display: flex;
        }

        header .h_you .h_p {
            margin-right: 20px;
        }

        main {
            display: flex;
        }

        main .left {
            width: 200px;
            min-height: 800px;
            background-color: rgba(8, 22, 51, 0.856);
        }

        main .m_ul {
            text-align: left;
            list-style: none;
            color: white;
            min-height: 900px;
        }

        main .m_ul li {
            padding-left: 20px;
            width: 200px;
            line-height: 50px;
            border-radius: 10px;
        }

        main .iconfont {
            margin-right: 10px;
            font-size: 20px;
        }

        main .right {
            flex: 1;
        }


        /* right ——top */
        main .right .r_top {
            height: 40px;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        main .right .r_top .r_t_zuo,
        main .right .r_top .r_t_you {
            display: flex;
            align-items: center;
            color: white;
        }

        main .right .r_top .r_t_zuo .top_btn,
        main .right .r_top .r_t_you .top_btn {
            text-align: center;
            line-height: 40px;
            height: 40px;
            background-color: rgba(8, 22, 51, 0.856);
        }

        main .right .r_top .r_t_zuo .iconfont,
        main .right .r_top .r_t_you .iconfont {
            color: black;
        }







        /* right——center */
        main .right .r_center{
            display: flex;
            height:80px;
            justify-content: space-around;
            width: 100%;
            /* background-color: grey; */
        }
        main .right .r_center .cer{
            box-sizing: border-box;
            padding: 20px;
            width: 23%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: skyblue;
        }
        main .right .r_center .cer:nth-child(3){
            background-color: rgb(122, 211, 134);
        }
        main .right .r_center .cer:nth-child(4){
            background-color: rgba(159, 167, 160, 0.973);
        }
        main .right .r_center .cer .cer_zuo{
            color: white;
        }
        main .right .r_center .cer .cer_zuo p{
            font-size: 20px;
        }
        main .right .r_center .cer .cer_you .iconfont{
            font-size: 30px;
            color: white;
        }




        /* right——图形 */
        main .right .r_tuxing{
            margin-top: 20px;
            width: 100%;
            height: 450px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        main .right .r_tuxing .tx_left,main .right .r_tuxing .tx_right{
            width: 700px;
            height: 410px;
            background-color: rgb(231, 231, 231);
        }
        main .right .r_tuxing .tx_left .tx_top ,main .right .r_tuxing .tx_right .tx_top{
            line-height: 40px;
            height: 40px;
            padding-left: 10px;
            /* background-color: aliceblue; */
            border-bottom: 1px solid gray;
        }
        main .right .r_tuxing .tx_left .tx_bottom,main .right .r_tuxing .tx_right .tx_bottom{
            width: 100%;
            height: 370px;
        }






        /* right-bottom */
        main .right .r_bottom{
            margin: 0 auto;
            box-sizing: border-box;
            width: 98%;
            min-height: 400PX;
            background-color: rgb(245, 245, 245);
        }
        main .right .r_bottom .b_top{
            box-sizing: border-box;
            padding: 30px;
            list-style: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 40px;
            border-bottom: 1px solid gray;
            font-weight: 700;
        }
        main .right .r_bottom .b_top li{
            width: 100%;
            text-align: left;
            height: 40px;
            line-height: 40px;
        }
        main .right .r_bottom .b_bottom{
            width: 100%;
            text-align:left;
            display: flex;
            align-items:start;
            flex-direction: column;

        }
        main .right .r_bottom .b_bottom .rul{
            padding: 0 40px;
            box-sizing: border-box;
            list-style: none;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-top: 1px solid gray;
        }
        main .right .r_bottom .b_bottom .rul li{
            width: 100%;
            height: 50px;
            line-height: 50px;
        }
        main .right .r_bottom .b_bottom .rul .lis{
            position: relative;
            height: 20px;
            border-radius: 15px;
            border: 2px solid gainsboro;
        }
        main .right .r_bottom .b_bottom .rul .lis span{
            position: absolute;
            box-sizing: border-box;
            display: inline-block;
            height: 100%;
            border-radius: 15px;
            width: 80%;
            background-color:rgb(12, 230, 102);
        }
    </style>
</head>

<body>
    <header>
        <h2>后台管理系统</h2>
        <div class="h_you">
            <p class="h_p">当前用户: <span>bootstrap</span></p>
            <p>角色：<span>管理员</span></p>
        </div>
    </header>
    <main>
        <div class="left">
            <ul class="m_ul">
                <li><span class="iconfont">&#xe657;</span>后台页面</li>
                <li><span class="iconfont">&#xe657;</span>设计元素</li>
                <li><span class="iconfont">&#xe657;</span>表单元素</li>
                <li><span class="iconfont">&#xe657;</span>实例页面</li>
                <li><span class="iconfont">&#xe657;</span>常用列表</li>
                <li><span class="iconfont">&#xe657;</span>脚本插件</li>
                <li><span class="iconfont">&#xe657;</span>统计图表</li>
            </ul>
        </div>
        <div class="right">
            <!--right——top -->
            <div class="r_top">
                <div class="r_t_zuo">
                    <span class="iconfont">&#xe657;</span>
                    <div class="top_btn">欢迎首页</div>
                </div>

                <div class="r_t_you">
                    <span class="iconfont">&#xe657;</span>
                    <div class="top_btn">页面操作</div>
                </div>
            </div>
            <div class="r_center">
                <div class="cer">
                    <div class="cer_zuo">
                        <span>今日收入</span>
                        <p>10000000</p>
                    </div>
                    <div class="cer_you"><span class="iconfont">&#xe657;</span></div>
                </div>
                <div class="cer">
                    <div class="cer_zuo">
                        <span>左日收入</span>
                        <p>10000000</p>
                    </div>
                    <div class="cer_you"><span class="iconfont">&#xe657;</span></div>
                </div>
                <div class="cer">
                    <div class="cer_zuo">
                        <span>月度累计收入</span>
                        <p>10000000</p>
                    </div>
                    <div class="cer_you"><span class="iconfont">&#xe657;</span></div>
                </div>
                <div class="cer">
                    <div class="cer_zuo">
                        <span>年度累计收入</span>
                        <p>10000000</p>
                    </div>
                    <div class="cer_you"><span class="iconfont">&#xe657;</span></div>
                </div>
            </div>
            <div class="r_tuxing">
                <div class="tx_left">
                    <div class="tx_top">
                        <p>每月收入</p>
                    </div>
                    <div class="tx_bottom tx_bottom1"></div>
                </div>
                <div class="tx_right">
                    <div class="tx_top">
                        <p>每年收入走势</p>
                    </div>
                    <div class="tx_bottom tx_bottom2"></div>
                </div>
            </div>
            <div class="r_bottom">
                <ul class="b_top">
                    <li>序号</li>
                    <li>订单号</li>
                    <li>商品名称</li>
                    <li>下单日期</li>
                    <li>状态</li>
                    <li>处理情况</li>
                </ul>
                <ul class="b_bottom">

                </ul>
            </div>
        </div>
    </main>
</body>

</html>
<script src="./mock.js"></script>
<script src="./Mock_data.js"></script>
<script src="./Mock_data.json"></script>
<script src="./promise-ajax.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<!-- 树状图 -->
<script>
    let tx_btms1 = document.querySelector('.tx_bottom1')
    // console.log(tx_btms1);
    var a = echarts.init(tx_btms1);
    a.setOption({
        // 条形图============================================
        title: { //图表的标题
            text: '',
            left: 10,
            top: 5,
        },
        legend: { //图例
            left:'center',
            top:5,
        },
        xAxis: { //x轴设置
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            splitLine: {
                show: true,
                lineStyle: {//背景线条=====================
                    color: 'gray',
                    opacity: 0.23,
                }
            }
        },
        yAxis: { //y轴设置
            type:"value",
            max:5000,
            min:1500,
            interval:500,
              splitLine: {
                show: true,
                lineStyle: {//背景线条=====================
                    color: 'gray',
                    opacity: 0.23,
                }
            }
        },
        series: [ //数据系列
            {
                name: '当前每月收入',
                barWidth: 20, //柱子的宽度
                color: 'blue',
                // showBackground: true,//显示背景色
                backgroundStyle: {
                    // color: 'blue',
                },
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2600,1600,1700,3400,4800,3500,1700,2500,1700,2200,3900,1800]
            },
            {
                name: '同城每月收入',
                color: 'skyblue',
                barWidth: 20, //柱子的宽度
                // showBackground: true,//显示背景色
                backgroundStyle: {
                    // color: 'blue',
                },
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2100,1700,1900,3000,4000,3700,1800,2000,2800,2200,3800,3700]

            }

        ]
    })
</script>
<!-- 条形图 -->
<script>
    let tx_btms2 = document.querySelector('.tx_bottom2')
    // console.log(tx_btms2);
    var  b= echarts.init(tx_btms2);
    // console.log(b);
    b.setOption({
        title: { //图表的标题
            text: '',
            left: 10,
            top: 5,
        },
        legend: { //图例
            left:'center',
            top:5,
        },
        xAxis: { //x轴设置
            data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
            splitLine: {
                show: true,
                lineStyle: {//背景线条=====================
                    color: 'gray',
                    opacity: 0.23,
                }
            }
        },
        yAxis: { //y轴设置
            type:"value",
            max:80,
            min:20,
            interval:10,
            splitLine: {
                show: true,
                lineStyle: {//背景线条=====================
                    color: 'gray',
                    opacity: 0.23,
                }
            }
        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                color:'rgb(122, 211, 134)',
                type: 'line',//'line' , 'bar' , 'pie'
                symbolSize: 5, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color:'rgb(122, 211, 134)',
                        // borderWidth: 2, //圆点的边框宽度
                        // borderColor: 'white', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        // shadowBlur: 5,

                    }
                },
                data: [50, 55, 60, 40, 45, 40, 65, 40, 69, 20, 72, 60],
            },
            {
                name: '每年周期收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                symbolSize: 5, //圆点大小
                // symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                splitLine: {
                    show: true,
                    lineStyle: {//背景线条=====================
                        color: 'gray',
                        opacity: 0.23,
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        // borderWidth: 2, //圆点的边框宽度
                        // borderColor: 'white', //圆点的边框颜色
                        // lineStyle: { width: 2 }, //折现的宽度
                        // shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                },
                data: [47, 50, 52, 48, 40, 35, 65,45,58,30,72,57],

            }

        ]
    });
</script>


<!-- 分装一个cookie的值 -->
<script>
    function getcookie(key){
        var a = document.cookie
        var arr = a.split('; ')
        var obj = {}
        arr.forEach((item,index)=>{
            var arr2 = item.split('=')
            obj[arr2[0]] = arr2[1]
        })
        return obj[key]
    }
</script>




<!-- Promise分装ajax渲染render -->
<script>
    let bomboms = document.querySelector('.b_bottom')
    ajax('get','./Mock_data.json',{}).then((data)=>{
    //     console.log(data);
        // 分装渲染=========================================
        render(data)
        // renderMack(Mockdata.list)
        // 不是分装的渲染========================================
        // var str = data.map((item, index) => {
        //     return `
        //     <ul class= "rul">
        //         <li>${item.id}</li>
        //         <li>${item.ddh}</li>
        //         <li>${item.goushop}</li>
        //         <li>${item.xiadan}</li>
        //         <li>${item.status}</li>
        //         <li class="lis" ><span></span></li>
        //     </ul>
        //     `
        // }).join('')
        // bomboms.innerHTML = str

    })
    // 分装渲染========================================= 
    function render(data){
        // console.log(res);
        var str = data.map((item, index) => {
            return `
            <ul class= "rul">
                <li>${item.id}</li>
                <li>${item.ddh}</li>
                <li>${item.goushop}</li>
                <li>${item.xiadan}</li>
                <li>${item.status}</li>
                <li class="lis" ><span></span></li>
            </ul>
            `
        }).join('')
        bomboms.innerHTML = str
    }
    // // 用Mackdata渲染进度条====失败==============================
    // function renderMack(Mockdata){
    //     var str2 = Mockdata.map((item,index)=>{
    //         return `
    //         <li class="lis" ><span>${item.chuli}%</span></li>
    //         `

    //     })
    //     console.log(bomboms.querySelector('.lis'))
    //     bomboms.querySelector('.lis').innerHTML =str2
    // }

</script>
<!-- 这是用Mock_data渲染 --> -->
 <!-- <script>
    let bomboms = document.querySelector('.b_bottom')
    // console.log(bomboms);
    render(res.list)
    function render(res){
        // console.log(res);
        var str = res.map((item, index) => {
            return `
            <ul class= "rul">
                <li>${item.id}</li>
                <li>${item.ddh}</li>
                <li>${item.name}</li>
                <li>${item.date}</li>
                <li>${item.status}</li>
                <li>${item.More}</li>
            </ul>
            `
        }).join('')
        bomboms.innerHTML = str
    }
</script> -->
